<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html lang="en">
<head>
  <link rel="stylesheet" href="${ctx}/statics/css/manage.css">
  <title>新增设备</title>
</head>
<body>

<section class="stepForm-wrap">
    <div>
        <div class="layui-carousel" id="stepForm" lay-filter="stepForm" style="margin: 0 auto;">
            <div carousel-item>
                <div class="step-box area-box">
                    <form class="layui-form step-area" action="#" lay-filter="step-area">
                        <div class="layui-form-item">
                            <label class="layui-form-label">区域</label>
                            <div class="layui-input-block">
                                <select name="areaId" class="areaMenu" lay-verify="required"></select>
                            </div>
                        </div>
                        <div class="layui-form-item clearfix">
                            <div class="layui-input-block fr">
                                <button type="button" class="layui-btn layui-btn-primary" id="area-btn">新增区域</button>
                                <button type="button" class="layui-btn layui-btn-primary" lay-submit lay-filter="stepToGateway">下一步</button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="step-box gateway-box">
                    <div>
                        <div>已选区域：<span class="area-selected"></span></div>
                    </div>
                    <div class="layui-form-item clearfix">
                        <div class="layui-input-block fr">
                            <button type="button" class="layui-btn layui-btn-primary pre">上一步</button>
                            <button type="button" class="layui-btn layui-btn-primary stepToReaderCode layui-hide" lay-submit lay-filter="stepToReaderCode">下一步</button>
                        </div>
                    </div>
                    <form class="layui-form add-box add-gateway-box" lay-filter="add-gateway-box" action="#">
                        <fieldset class="layui-elem-field layui-field-title">
                            <legend>新增网关</legend>
                        </fieldset>
                        <div class="layui-form-item">
                            <label class="layui-form-label">网关IP<i>*</i></label>
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" id="ip" name="ip" placeholder="请输入" lay-verify="ip">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">IP简称<i>*</i></label>
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" name="gatewayName" placeholder="自动填充" lay-verify="required">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">端口号<i>*</i></label>
                            <div class="layui-input-inline">
                                <input type="number" class="layui-input" name="port" placeholder="请输入" lay-verify="port">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">备注</label>
                            <div class="layui-input-block">
                                <textarea name="descrition" placeholder="请输入" class="layui-textarea"></textarea>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="fr">
                                <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" lay-submit lay-filter="add-gateway-box">确定</button>
                                <button type="reset" class="layui-btn layui-btn-primary gatewayReset layui-hide">重置</button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="step-box readerCode-box">
                    <div>
                        <div>已选区域：<span class="area-selected"></span></div>
                        <div>已选网关：<span class="gateway-selected"></span></div>
                    </div>
                    <div class="clearfix">
                        <div class="layui-input-block fr">
                            <button type="button" class="layui-btn layui-btn-primary pre">上一步</button>
                            <button type="button" class="layui-btn layui-btn-primary stepToDevice layui-hide" lay-submit lay-filter="stepToDevice">下一步</button>
                        </div>
                    </div>
                    <form action="#" class="layui-form add-box add-readerCode-box" action="#" lay-filter="add-readerCode-box">
                        <fieldset class="layui-elem-field layui-field-title">
                            <legend>新增仪表</legend>
                        </fieldset>
                        <div class="layui-form-item">
                            <label class="layui-form-label">仪表识别码<i>*</i></label>
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" name="readerCode" placeholder="请输入" lay-verify="readerCode">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">备注</label>
                            <div class="layui-input-inline">
                                <textarea name="descrition" placeholder="请输入" class="layui-textarea"></textarea>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="fr">
                                <button type="button" class="layui-btn layui-btn-primary addsbtn" lay-submit lay-filter="add-readerCode-box">确定</button>
                                <button type="reset" class="layui-btn layui-btn-primary readerCodeReset layui-hide">重置</button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="step-box device-box">
                    <div>
                        <div>已选区域：<span class="area-selected"></span></div>
                        <div>已选网关：<span class="gateway-selected"></span></div>
                        <div>仪表识别码：<span class="readerCode-selected"></span></div>
                    </div>
                    <div class="clearfix">
                        <div class="layui-input-block fr">
                            <button type="button" class="layui-btn layui-btn-primary pre">上一步</button>
                            <button type="button" class="layui-btn layui-btn-primary stepToComplete layui-hide" lay-submit lay-filter="stepToComplete">下一步</button>
                        </div>
                    </div>
                    <form class="layui-form add-box add-device-box" action="#" lay-filter="add-device-box">
                        <fieldset class="layui-elem-field layui-field-title">
                            <legend>新增设备</legend>
                        </fieldset>
                        <div class="layui-form-item">
                            <label class="layui-form-label">所在区域<i>*</i></label>
                            <div class="layui-input-inline">
                                <input type="hidden" class="layui-input" name="areaId">
                                <input type="text" class="layui-input" name="areaName" placeholder="请输入" lay-verify="required" readonly disabled>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">仪表类型<i>*</i></label>
                            <div class="layui-input-inline">
                                <select class="layui-input typeMenu" name="deviceTypeCode" lay-verify="required">
                                    <option value="1">水表</option>
                                    <option value="0" selected>电表</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">监控位置<i>*</i></label>
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" name="anotherName" placeholder="请输入" lay-verify="required">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">日标准量<i>*</i></label>
                            <div class="layui-input-inline">
                                <input type="number" class="layui-input" name="standard" placeholder="请输入" lay-verify="required">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">网关<i>*</i></label>
                            <div class="layui-input-inline">
                                <input class="layui-input" name="ip" placeholder="请输入" lay-verify="required" readonly disabled>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">仪表识别码<i>*</i></label>
                            <div class="layui-input-inline">
                                <input class="layui-input" name="readerCode" placeholder="请输入" lay-verify="required" readonly disabled>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">备注</label>
                            <div class="layui-input-inline">
                                <textarea name="descrition" placeholder="请输入" class="layui-textarea"></textarea>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="fr">
                                <button type="button" class="layui-btn layui-btn-primary addsbtn" lay-submit lay-filter="add-device-box">确定</button>
                                <button type="reset" class="layui-btn layui-btn-primary deviceReset layui-hide">重置</button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="step-box complete-box">
                    <div>
                        <h4>设备新增成功</h4>
                        <ul>
                            <li><span>区所在域</span> <span data-field="areaName"></span></li>
                            <li><span>仪表类型</span> <span data-field="deviceTypeCodeStr"></span></li>
                            <li><span>监控位置</span> <span data-field="anotherName"></span></li>
                            <li><span>日标准量</span> <span data-field="standard"></span></li>
                            <li><span>网关</span> <span data-field="ip"></span></li>
                            <li><span>仪表识别码</span> <span data-field="readerCode"></span></li>
                            <li><span>备注</span> <span data-field="descrition"></span></li>
                        </ul>
                    </div>
                    <div class="layui-form-item clearfix">
                        <div class="layui-input-block fr">
                            <button class="layui-btn layui-btn-primary next againAdd">再次新增设备</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<%--区域弹窗--%>
<script type="text/html" id="area-layer-tpl">
    <form class="layui-form add-box add-area-box" lay-filter="add-area-box" action="#">
        <div class="layui-form-item">
            <label class="layui-form-label">区域名称<i>*</i></label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" name="areaName" placeholder="请输入" lay-verify="required">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <textarea name="descrition" placeholder="请输入" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="fr">
                <button type="button" class="layui-btn layui-btn-primary" lay-submit lay-filter="add-area-box">确定</button>
                <button type="cancel" class="layui-btn layui-btn-primary">取消</button>
            </div>
        </div>
    </form>
</script>

<script src="${ctx}/statics/js/addDevice.js"></script>
</body>
</html>
